<template>
  <section class="book-add">
    <mt-header title="分享书籍">
      <mt-button slot="left" @click="$router.go(-1)">
        <i class="fa fa-angle-left"></i>
      </mt-button>
      <mt-button slot="right" @click="submit" :disabled="isUploading">
        上传
      </mt-button>
    </mt-header>
    <div class="content">
      <mt-cell title="封面" is-link @click.native="$refs.bookImg.click()">
        <img class="book-img" :src="bookImg" :onerror="errorImg">
        <input type="file" ref="bookImg" style="display:none" @change="setBookImg">
      </mt-cell>
      <mt-field label="书名" placeholder="请输入书名" v-model.trim="book.bookname"></mt-field>
      <mt-field label="作者" placeholder="请输入作者" v-model.trim="book.author"></mt-field>
      <mt-field label="ISBN" placeholder="请输入ISBN" v-model.trim="book.isbn"></mt-field>
      <mt-field label="简介" placeholder="请输入简介" v-model.trim="book.remark" type="textarea" rows="4"></mt-field>
      <mt-cell title="分类" @click.native="openTypeSelector">
        <span style="color:#2b2b2b">{{typeName}}</span>
        <span v-if="!book.typeId">请选择分类</span>
      </mt-cell>
      <mt-cell title="选择文件" @click.native="$refs.bookFile.click()">
        <span style="color:#2b2b2b">{{fileName}}</span>
        <input type="file" ref="bookFile" style="display:none" @change="setBookFile">
      </mt-cell>

      <mt-popup v-model="popupTypesVisible" position="bottom" class="types-picker">
        <div class="picker-options">
          <span @click="popupTypesVisible = false">取消</span>
          <span @click="setBookType">确定</span>
        </div>
        <mt-picker ref="bookTypePicker" :slots="bookTypes" valueKey="typeName"></mt-picker>
      </mt-popup>
    </div>
  </section>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  name: 'book-add',
  props: [],
  data() {
    return {
      book: {
        // "author": "刘大师",
        // "bookname": "史记",
        // "img": "https://img3.doubanio.com/lpic/s1953384.jpg",
        // "isbn": "ISBN:201705045201314",
        // "remark": "这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注",
        // "submitUserId": "2",
        // "fileId":null,
        // "typeId": "1"
      },
      typeName: '',
      bookTypes: [
        {
          flex: 1,
          values: [],
          textAlign: 'center'
        }
      ],
      isUploading: false,
      popupTypesVisible: false,
      bookImg: '',
      errorImg: `this.src="${require('../assets/img/default-img.jpg')}"`,
      fileName: ''
    }
  },
  methods: {
    submit() {
      if (!this.book.img) {
        Toast('请选择封面')
        return false
      } else if (!this.book.bookname) {
        Toast('请输入书名')
        return false
      } else if (!this.book.author) {
        Toast('请输入作者名')
        return false
      } else if (!this.book.isbn) {
        Toast('请输入ISBN编号')
        return false
      } else if (!this.book.typeId) {
        Toast('请选择分类')
        return false
      } else if (!this.book.fileId) {
        Toast('请选择上传书籍')
        return false
      } 
      this.$http.postObj('book/save', this.book).then((data) => {
        if (data.code === 0) {
          this.$router.push({ name: 'home' })
        } else {
          Toast(data.msg)
        }
      })
    },
    getTypes() {
      this.$http.postObj('booktype/getBookTypeList').then((data) => {
        if (data.code === 0) {
          this.bookTypes[0].values = data.data
        } else {
          Toast(data.msg)
        }
      })
    },
    setBookType() {
      const result = this.$refs.bookTypePicker.values[0]
      this.typeName = result.typeName
      this.book.typeId = result.id
      this.popupTypesVisible = false
    },
    openTypeSelector() {
      this.popupTypesVisible = true
    },
    setBookImg(e) {
      const file = e.target.files[0]
      // this.userHeadImg = require('../assets/img/loading.png')
      this.uploadHeadImage(file)
      e.target.value = ''
    },
    uploadHeadImage(file) {
      this.isUploading = true
      let fd = new FormData()
      fd.append('file', file)
      this.$http.post('file/upload', fd).then((data) => {
        if (data.code === 0) {
          this.book.img = data.data
          this.bookImg = `${__FILESERVER__}file/download?filId=${data.data}`
        } else {
          Toast(data.msg)
        }
        this.isUploading = false
      }).catch(() => this.isUploading = false)
    },
    setBookFile() {
      this.isUploading = true
      const file = this.$refs.bookFile.files[0]
      this.fileName = file.name

      let fd = new FormData()
      fd.append('file', file)
      this.$http.post('file/upload', fd).then((data) => {
        if (data.code === 0) {
          this.book.fileId = data.data
        } else {
          Toast(data.msg)
        }
        this.isUploading = false
      }).catch(() => this.isUploading = false)
      // const file = e.target.files[0]
      // this.uploadHeadImage(file)
      // e.target.value = ''
    }
  },
  components: {},
  filters: {},
  watch: {},
  mounted() {
    this.getTypes()
    this.book.submitUserId = UT.getSessionJson('CUR_USER')['id']
    // for (let i = 0; i < 20; i++) {
    //   this.book.bookname = `史记 第${(i + 1 +20+20)}部`
    //   this.submit()
    // }
  }
}
</script>

<style lang="less">
@import "../assets/less/app.variable.less";
.book-add {
  .content > .mint-cell:nth-child(n + 2) {
    border-top: 1px solid @borderColor;
  }
  .book-img {
    width: 50px;
    height: 72px;
    margin: 10px 0;
  }
  .mint-field-core {
    text-align: right;
  }
  .types-picker {
    width: 100%;
  }
  .picker-options {
    display: flex;
    border-bottom: 1px solid @borderColor;
    span {
      flex: 1;
      text-align: center;
      padding: 10px;
      color: @primary;
      font-size: 1.6rem;
    }
  }
}
</style>